<template>
    <div class="index" >
      <el-form label-position="top" :model="personalForm" :inline="true" :rules="personalFormRules" ref="personalFormRules"  >
      <el-card class="index">
        <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
        <el-row>
             <el-col :span="6">
               <el-form-item label="身份证人像面" prop="pIdcardA" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF41"
                  :before-upload="beforeUploadImgF41"
                  :disabled="personalForm.id"
                  >
                  <img v-if="personalForm.pIdcardA" :src="personalForm.pIdcardA" class="avatar">
                  <div v-else>
                     <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-idcard-front.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
               <el-form-item label="身份证国徽面" prop="pIdcardB" style="margin-left: 50px;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF40"
                  :before-upload="beforeUploadImgF40"
                  :disabled="personalForm.id"
                  >
                  <img v-if="personalForm.pIdcardB" :src="personalForm.pIdcardB" class="avatar">
                  <div v-else style="height: 100%;">
                    <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-idcard-back.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="姓名" prop="contactName"  style="width: 100%;">
                  <el-input :disabled="personalForm.id"  v-model.trim="personalForm.contactName" style="width: 80%;" placeholder="请输入姓名" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="手机号"  prop="contactPhone"  style="width: 100%;">
                  <el-input   v-model.trim="personalForm.contactPhone" style="width: 80%;" placeholder="请输入手机号"   clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="证件号码" prop="principalCertNo"  style="width: 100%;">
                  <el-input :disabled="personalForm.id" v-model.trim="personalForm.principalCertNo" style="width: 80%;" placeholder="请输入证件号码" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="证件有效期" prop="principalCertStt" style="width: 100%;">
              <el-date-picker
                v-model="personalForm.principalCertStt"
                value-format="yyyyMMdd"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker
                v-model="personalForm.principalCertExpire"
                value-format="yyyyMMdd"
                :disabled="personalForm.legalCertValidityType > 0"
                type="date"
                placeholder="截止日期">
              </el-date-picker>
                <el-checkbox style="margin-left: 20px;" true-label="1" false-label="0" @change="legalChange" v-model="personalForm.legalCertValidityType">长期有效</el-checkbox>
            </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="电子邮箱" prop="contactEmail"  style="width: 100%;">
                  <el-input  v-model.trim="personalForm.contactEmail" style="width: 80%;" placeholder="请输入电子邮箱" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="地址" prop="legalAddr" v-if="!personalForm.id"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.legalAddr" style="width: 90%;" placeholder="请输入地址" clearable  />
                </el-form-item>
            </el-col>
            
        </el-row>
    </el-card>
    <el-card class="index">
        <div slot="header" class="clearfix">
        <span>经营信息</span>
      </div>
        <el-row>
             <el-col :span="6">
                <el-form-item label="商户名称" prop="merchantName"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.merchantName" style="width: 80%;" placeholder="请输入商户负责人" clearable  />
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="商户简称" prop="merchantShortName"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.merchantShortName" style="width: 80%;" placeholder="请输入商户简称" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="商户经营地区" prop="detailRegion"  style="width: 100%;">
                    <el-cascader
                     style="width: 80%;"
                     v-model="personalForm.detailRegion"
                     :options="regionList"
                     :props="detailRegion"
                     @change="detailRegionChange">
                   </el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="商户经营详细地址" prop="merchantAddress"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.merchantAddress" style="width: 90%;" placeholder="请输入商户经营详细地址" clearable  />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属行业" prop="mccId1" style="width: 100%;">
                  <el-select clearable v-model="personalForm.mccId1" style="width: 80%;"  @change="enterpriseChange1"  placeholder="请选择经营场景">
                     <el-option
                       v-for="item in mccList1"
                       :key="item.id"
                       :label="item.mcc2Name"
                       :value="item.id">
                     </el-option>
                    </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" "   style="width: 100%;margin-top:23px;">
                  <el-select clearable v-model="personalForm.mccId" style="width: 80%;"  @change="enterpriseChange3"  placeholder="请选择经营场景">
                     <el-option
                       v-for="item in mccList2"
                       :key="item.id"
                       :label="item.mcc3Name"
                       :value="item.id">
                     </el-option>
                    </el-select>
              </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label=" "   style="width: 100%;margin-top:23px;">
                  <el-select clearable v-model="personalForm.mccId" style="width: 80%;"    placeholder="请选择经营场景">
                     <el-option
                       v-for="item in mccList3"
                       :key="item.id"
                       :label="item.mcc3Name"
                       :value="item.id">
                     </el-option>
                    </el-select>
              </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
            <el-col :span="12">
               <el-form-item label="店铺门头照" prop="pOutside" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF22"
                  :before-upload="beforeUploadImgF22"
                  >
                  <img v-if="personalForm.pOutside" :src="personalForm.pOutside" class="avatar">
                  <div v-else>
                     <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-img.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
               <el-form-item label="店铺内景/工作区域照" prop="pInside" style="margin-left: 50px;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF24"
                  :before-upload="beforeUploadImgF24"
                  >
                  <img v-if="personalForm.pInside" :src="personalForm.pInside" class="avatar">
                  <div v-else style="height: 100%;">
                    <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-img.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
               <el-form-item label="店铺收银台/公司前台照" prop="pCashier" style="margin-left: 50px;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF105"
                  :before-upload="beforeUploadImgF105"
                  >
                  <img v-if="personalForm.pCashier" :src="personalForm.pCashier" class="avatar">
                  <div v-else>
                     <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-img.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
               <el-form-item label="结算人站收银台照片" prop="pIdcardHander" style="margin-left: 50px;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF105s"
                  :before-upload="beforeUploadImgF105s"
                  >
                  <img v-if="personalForm.pIdcardHander" :src="personalForm.pIdcardHander" class="avatar">
                  <div v-else>
                     <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-img.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
        </el-row>
    </el-card>
    <el-card class="index">
        <div slot="header" class="clearfix">
        <span>银行卡绑定</span>
      </div>
        <el-row>
          <el-col :span="6">
               <el-form-item label="银行卡卡号面" prop="pBankcardA" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF13"
                  :before-upload="beforeUploadImgF13"
                  >
                  <img v-if="personalForm.pBankcardA" :src="personalForm.pBankcardA" class="avatar">
                  <div v-else>
                     <img style="margin-bottom: -15px;" class="avatar-none"  src="https://dashboard.huifu.com/member/static/img/default-bank-front.svg" alt="">
                    <el-button size="mini" type="primary">点击上传</el-button>
                  </div>
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="银行账户名称" prop="accountCardName"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.accountCardName" style="width: 80%;" placeholder="请输入银行账户名称" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="银行账户号" prop="accountCardNum"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.accountCardNum" style="width: 80%;" placeholder="请输入银行账户号" clearable  />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
                <el-form-item label="银行开户地区" porp="contactName"  style="width: 100%;">
                  <el-cascader
                     style="width: 80%;"
                     v-model="bankForm.mcc"
                     :options="secondaryList"
                     :props="{ expandTrigger: 'hover' }"
                     @change="geRegionChange">
                  </el-cascader>
                </el-form-item>
            </el-col>  parentlist-->
            <el-col :span="6">
                <el-form-item label="银行名称" prop="bankId" style="width: 100%;">
                  <el-select  style="width: 80%;" v-model.trim="personalForm.bankId"  @change="enterpriseChange" filterable placeholder="请选择/搜索开户行">
                   <el-option
                     v-for="item in dLimitList"
                     :key="item.id"
                     :label="item.parent_name"
                     :value="item.id">
                   </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="银行预留手机号" prop="accountPhone"  style="width: 100%;">
                  <el-input   type="text" v-model.trim="personalForm.accountPhone" style="width: 80%;" placeholder="请输入银行账户号" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="结算费率" prop="rate"  style="width: 100%;">
                  <el-input   type="number" v-model.trim="personalForm.rate" style="width: 80%;" placeholder="请输入银行账户号" clearable  >
                    <template slot="append">万分比</template>
                  </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item
                 label="安心签验证码"
                 prop="checkCode"
               >
               <div style="display:flex;justify-content:center;">
                 <el-input v-model="personalForm.checkCode" placeholder="请输入验证码"></el-input>
                   <el-button style="margin-left:10px;" type="primary" @click.prevent="getCode()"   :disabled="!checkCodeChow">
                     <span v-show="checkCodeChow">获取验证码</span>
                     <span v-show="!checkCodeChow" class="count">{{count}} s</span>
                   </el-button>
               </div>
             </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                <el-form-item label="持卡人证件有效期" prop="rate"  style="width: 100%;">
                  <el-date-picker
                v-model="personalForm.principalCertStt"
                value-format="yyyyMMdd"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker
                v-model="personalForm.principalCertExpire"
                value-format="yyyyMMdd"
                :disabled="personalForm.legalCertValidityType > 0"
                type="date"
                placeholder="截止日期">
              </el-date-picker>
                <el-checkbox style="margin-left: 20px;" true-label="1" false-label="0" v-model="personalForm.legalCertValidityType">长期有效</el-checkbox>
                </el-form-item>
            </el-col> -->
        </el-row>
    </el-card>
  </el-form>

    <!-- <el-card class="index">
        <div slot="header" class="clearfix">
          <span>其他支付配置</span>
        </div>
        <el-form label-position="top" :model="payForm" :inline="true" :rules="payFormRules" ref="payFormRules"  >
        <el-row>
             <el-col :span="6">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="1">多方分账配置</el-checkbox>
                <el-checkbox label="2">手动取现配置</el-checkbox>
                <el-checkbox label="3">余额支付配置</el-checkbox>
              </el-checkbox-group>
            </el-col>
        </el-row>
      </el-form>
    </el-card> -->
  </div>
</template>

<script>
// import { dLimitList } from '../../../../../utils/banks'
import { getTopMccByType , merchantUpload , arealist , anxinSignPerson } from '@/api/api'
export default{
    props:{
      regionList:[Array],
      secondaryList:[Array],
      mccList1:[Array],
      dLimitList:[Array],
      minProfitRate:[String,Number],
      channelId:[String]
    },
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + `/product/mini/upload/`,
            token: { token: sessionStorage.getItem("token") },
            mccList2:[],
            mccList3:[],
            checkCodeChow:true,
            count:60,
            personalForm:{
              merchantType:3,
              mccId:'',
              mccId2:'',
              merchantName:'',
              principalCertNo:'',
              legalAddr:'',
              principalCertExpire:'',
              principalCertStt:'',
              accountCardNum:'',
              isOnline:0 //默认线下
              // bankId:67151
            },
            personalFormRules:{
              pIdcardA:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pIdcardA){
                        callback();
                    }else{
                        callback(new Error('请上传身份证人像面！'))
                    }
                 } }],
                 pIdcardB:[{required: true, validator:(rule , value , callback)=>{
               if(this.personalForm.pIdcardB){
                   callback();
               }else{
                   callback(new Error('请上传身份证国徽面！'))
               }
            } }],
            contactName:[{ required: true, message: '请输入商户负责人名称', trigger: 'blur' }],
            contactPhone:[{ required: true, message: '请输入个人手机号', trigger: 'blur' }],
            principalCertNo:[{ required: true, message: '请输入证件号码', trigger: 'blur' }],
            accountPhone:[{ required: true, message: '请输入银行预留手机号', trigger: 'blur' }],
            principalCertStt:[{ required: true, validator:(rule , value , callback)=>{
              if(this.personalForm.legalCertValidityType){
                if(!this.personalForm.principalCertStt){
                    callback(new Error('请选择开始日期！'))
                  }else{
                    callback()
                  }
              }else{
                if(!this.personalForm.principalCertStt){
                    callback(new Error('请选择开始日期！'))
                  }else if(!this.personalForm.principalCertExpire){
                    callback(new Error('请选择截止日期！'))
                  }else{
                    callback()
                  }
              }
            } }],
            contactEmail:[{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
            pBankcardA:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pBankcardA){
                        callback();
                    }else{
                        callback(new Error('请上传银行卡卡号面！'))
                    }
                 } }],
                 legalAddr:[{ required: true, message: '请输入地址', trigger: 'blur' }],
                 accountCardName:[{ required: true, message: '请输入银行账户名称', trigger: 'blur' }],
                 merchantAddress:[{ required: true, message: '请输入商户经营详细地址', trigger: 'blur' }],
                 accountCardNum:[{ required: true, message: '请输入银行账户号', trigger: 'blur' }],
                 bankId:[{ required: true, message: '请选择银行名称', trigger: 'change' }],
                 merchantName:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
               merchantShortName:[{ required: true, message: '请输入商户简称', trigger: 'blur' }],
               mccId1:[{ required: true,trigger: 'blur', validator:(rule , value , callback)=>{
                    if(this.personalForm.mccId1 && this.personalForm.mccId ){
                        callback();
                    }else{
                        callback(new Error('请选择完整的行业信息！'))
                    }
                 } }],
               detailRegion:[{ required: true, message: '请选择商户经营地区', trigger: 'blur' }],
               checkCode:[{ required: true, message: '请请输入验证码', trigger: 'blur' }],
               rate:[{ required: true, message: '请输入结算费率', trigger: 'blur' },
                      {required: true, validator:(rule , value , callback)=>{
                        const rateRules = new RegExp("^[0-9]*[1-9][0-9]*$")
                        if(rateRules.test(value)){
                          if(this.minProfitRate){
                                      if(value < this.minProfitRate){
                                       callback(new Error('结算费率不能低于业务经理结算最低费率'))
                                      }else{
                                       callback()
                                      }
                              }else{
                              callback(new Error('请选择业务经理！'))
                          }
                        }else{
                          callback(new Error('结算费率只能是正整数！'))
                        }
                    } }
               ],
               pOutside:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pOutside){
                        callback();
                    }else{
                        callback(new Error('请上传店铺门头照！'))
                    }
                 } }],
                 pInside:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pInside){
                        callback();
                    }else{
                        callback(new Error('请上传店铺内景/工作区域照！'))
                    }
                 } }],
                 pCashier:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pCashier){
                        callback();
                    }else{
                        callback(new Error('请上传店铺收银台/公司前台照！'))
                    }
                 } }],
                 pIdcardHander:[{required: true, validator:(rule , value , callback)=>{
                    if(this.personalForm.pIdcardHander){
                        callback();
                    }else{
                        callback(new Error('请上传结算人站收银台照片！'))
                    }
                 } }],
          },
            settlementFormRules:{},
            professionList:[ { value:'1A',lable:'各类专业,技术人员' } , { value:'1B',lable:'国家机关,党群组织,企事业单位的负责人' } , { value:'1C',lable:'办事人员和有关人员' } , { value:'1D',lable:'商业工作人员' } , { value:'1E',lable:'服务性工作人员' } , { value:'1F',lable:'农林牧渔劳动者' } , { value:'1G',lable:'生产工作,运输工作和部分体力劳动者' } , { value:'1H',lable:'不便分类的其他劳动者' }],
            mccProps:{
              lazy: true,
              value:'id',
              label:'mcc1Name',
              lazyLoad(node, resolve){
                console.log(node)
                let  level = node.level + 1
                setTimeout(async ()=>{
                  const res = await getTopMccByType({parentId:node.value,channelType:'16',level:level})
                  res.data.forEach(item=>{
                    if(node.level == 1){
                      item.mcc1Name = item.mcc2Name
                    }else{
                      item.mcc1Name = item.mcc3Name
                      item.leaf = 1
                    }
                  })
                  resolve(res.data);
                },1)
              }
            },
            detailRegion:{
              value:'id',
              label:'label',
            }
        }
    },
    methods:{
      async getCode(){
        const res = await anxinSignPerson({contactPhone:this.personalForm.contactPhone,principalCertNo:this.personalForm.principalCertNo,accountCardName:this.personalForm.accountCardName,accountCardNum:this.personalForm.accountCardNum,merchantName:this.personalForm.merchantName})
        if(res.code == 200){
          this.checkCodeChow = false
          this.count = 60
          this.countCoument()
        }else{
          this.$message.error(res.message)
        }
      },
      countCoument(){
        if(this.count>0){
          this.count--
          setTimeout(()=>{
            this.countCoument()
          },1000)
        }else{
          this.checkCodeChow = true
        }
      },
      beforeUploadImgF41(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/1`
                // this.uploadUrl = this.uploadUrl + 'F41/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      legalChange(v){
        if(v == '1'){
           this.personalForm.principalCertExpire = '29991231'
        }else{
          this.personalForm.principalCertExpire  = ''
        }
      },
      async  enterpriseChange1(v,type){
      const res = await getTopMccByType({channelType:45,level:3 , parentId:v,merchantType:4})
      this.mccList2 = res.data
      if(type == 'none'){

      }else{
        this.operateForm.mccId2 = ''
        this.operateForm.mccId = ''
      }
     
      },
      async enterpriseChange2(v,type){
        // const res = await getTopMccByType({channelType:45,level:3 , parentId:v,merchantType:4})
        // this.mccList3 = res.data
        // if(type == 'none'){

        // }else{
        //   this.operateForm.mccId = ''
        // }
        
      },
      doorUpLoadSuccessF41(file){
        if(file.code == 200){
           this.personalForm.pIdcardA = file.data.filePath
           if(file.data.name){
            this.personalForm.merchantName = file.data.name
            this.personalForm.principalCertNo = file.data.idNumber
            this.personalForm.legalAddr = file.data.address
           }
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF40(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/1`
                // this.uploadUrl = this.uploadUrl + 'F41/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF40(file){
        if(file.code == 200){
           this.personalForm.pIdcardB = file.data.filePath
           this.personalForm.principalCertStt = file.data.validPeriodStat ? file.data.validPeriodStat.replace(/-/g, "") : ''
           console.log(this.personalForm.pIdcardB)
           if(file.data.validPeriodEnd == '' || file.data.validPeriodEnd == '29991231'){
             this.personalForm.legalCertValidityType = '1'
             this.personalForm.principalCertExpire = '29991231'
           }else{
             this.personalForm.principalCertExpire = file.data.validPeriodEnd ? file.data.validPeriodEnd.replace(/-/g, "") : ''
           }
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF22(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/99`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF22(file){
        if(file.code == 200){
           this.personalForm.pOutside = file.data.filePath
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF24(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/99`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF24(file){
        if(file.code == 200){
           this.personalForm.pInside = file.data.filePath
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF105(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/99`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      beforeUploadImgF105s(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/99`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF105s(file){
        if(file.code == 200){
           this.personalForm.pIdcardHander = file.data.filePath
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      doorUpLoadSuccessF105(file){
        if(file.code == 200){
           this.personalForm.pCashier = file.data.filePath
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF13(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/mini/upload/2`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF13(file){
        if(file.code == 200){
           this.personalForm.pBankcardA = file.data.filePath
           this.personalForm.accountCardNum = file.data.cardNumber
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      geRegionChange(v){
        this.personalForm.mccId = v[2]
      },
      detailRegionChange(v){
        this.personalForm.areaId = v[2]
      }
    }
}
</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .avatar{
    width: 112px;
    height: 102px;
  }
.avatar-none{
    width: 112px;
    height: 102px;
}
::v-deep .el-form-item--small.el-form-item{
    /* text-align: center; */
    /* margin-right: 130px; */
}
::v-deep .el-col{
    display:flex;
    /* justify-content:space-between; */

}
::v-deep .el-upload--text{
    width: 112px !important;
    border: none !important;
}
</style>